<template>
  <!--  添加维修需求-->
  <div style="margin-top: 60px; margin-left: 330px; width: 300px; height: 500px; border: 0 solid red;">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <!-- 公寓名称 -->
      <el-form-item label="公寓名称" prop="dormitoryName">
        <el-input v-model="ruleForm.dormitoryName"></el-input>
      </el-form-item>
      <!-- 公寓状态 -->
      <el-form-item label="维修状态" prop="status">
        <el-select v-model="ruleForm.status" placeholder="请选择维修状态">
          <el-option label="待处理" value="Pending"></el-option>
          <el-option label="处理中" value="Processing"></el-option>
          <el-option label="已完成" value="Completed"></el-option>
        </el-select>
      </el-form-item>
      <!-- 申请人学号 -->
      <el-form-item label="申请人学号" prop="applicantStudentId">
        <el-input v-model="ruleForm.applicantStudentId"></el-input>
      </el-form-item>
      <!-- 申请人姓名 -->
      <el-form-item label="申请人姓名" prop="applicantStudentName">
        <el-input v-model="ruleForm.applicantStudentName"></el-input>
      </el-form-item>
      <!-- 申请人电话 -->
      <el-form-item label="申请人电话" prop="applicantStudentTelephone">
        <el-input v-model="ruleForm.applicantStudentTelephone"></el-input>
      </el-form-item>
      <!-- 维修人员姓名 -->
      <el-form-item label="维修人员姓名" prop="repairPersonnelName">
        <el-input v-model="ruleForm.repairPersonnelName"></el-input>
      </el-form-item>
      <!-- 维修人员电话 -->
      <el-form-item label="维修人员电话" prop="repairPersonnelTelephone">
        <el-input v-model="ruleForm.repairPersonnelTelephone"></el-input>
      </el-form-item>
      <!-- 开始时间 -->
      <el-form-item label="开始时间" prop="startTime">
        <el-date-picker v-model="ruleForm.startTime" type="datetime" placeholder="请选择开始时间"></el-date-picker>
      </el-form-item>
      <!-- 结束时间 -->
      <el-form-item label="结束时间" prop="endTime">
        <el-date-picker v-model="ruleForm.endTime" type="datetime" placeholder="请选择结束时间"></el-date-picker>
      </el-form-item>
      <!-- 维修备注 -->
      <el-form-item label="维修备注" prop="remarks">
        <el-input v-model="ruleForm.remarks"></el-input>
      </el-form-item>
      <!-- 操作按钮 -->
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">添加</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>


</template>

<script>
export default {
  data() {
    return {
      i: 0,
      category: null,
      ruleForm: {
        dormitoryName: '',  // 修改字段名称
        status: '',         // 新增维修需求的状态字段
        applicantStudentId: '',         // 新增申请人学号字段
        applicantStudentName: '',       // 新增申请人姓名字段
        applicantStudentTelephone: '',  // 新增申请人电话字段
        repairPersonnelName: '',        // 新增维修人员姓名字段
        repairPersonnelTelephone: '',   // 新增维修人员电话字段
        startTime: '',      // 新增开始时间字段
        endTime: '',        // 新增结束时间字段
        remarks: '',        // 新增维修备注字段
      },
      rules: {
        dormitoryName: [  // 修改字段名称
          {required: true, message: '请输入公寓名称', trigger: 'blur'}  // 修改提示信息
        ],
        status: [
          {required: true, message: '请选择维修状态', trigger: 'change'}
        ],
        applicantStudentId: [
          {required: true, message: '请输入申请人学号', trigger: 'blur'}
        ],
        applicantStudentName: [
          {required: true, message: '请输入申请人姓名', trigger: 'blur'}
        ],
        applicantStudentTelephone: [
          {required: true, message: '请输入申请人电话', trigger: 'blur'}
        ],
        repairPersonnelName: [
          {required: true, message: '请输入维修人员姓名', trigger: 'blur'}
        ],
        repairPersonnelTelephone: [
          {required: true, message: '请输入维修人员电话', trigger: 'blur'}
        ],
        startTime: [
          {required: true, message: '请选择开始时间', trigger: 'change'}
        ],
        endTime: [
          {required: true, message: '请选择结束时间', trigger: 'change'}
        ],
        remarks: [
          {required: true, message: '请输入维修备注', trigger: 'blur'}
        ],
      }
    };
  },
  methods: {
    submitForm(formName) {
      const _this = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          axios.post('http://localhost:9090/save', _this.ruleForm).then(function (resp) {
            if (resp.data.code === 0) {
              _this.$alert(_this.ruleForm.name + '添加成功', '', {
                confirmButtonText: '确定',
                callback: action => {
                  _this.$router.push('/buildingManager')
                }
              });
            }
          })
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  },
  created() {
    const _this = this
    axios.get('http://localhost:9090/dormitoryAdmin/list').then(function (resp) {
      _this.dormitoryAdminList = resp.data.data
    })
  }
}
</script>
